<template>
    <div class="QualityTestingEchart">
        <div id="containerecharts" ref="containerecharts" style="height: 100%"></div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import moment from "moment";
import echarts from 'echarts'
export default {
    name: 'QualityTestingEchart',
    data() {
        return {
            formData: {
                month: ''
            },
            tableData: '',
            app: {},
            option: '',
        }
    },
    computed: {
        ...mapGetters([
            'userInfo',
        ])
    },
    mounted() {
        this.formData.month = moment().format('yyyy-MM') + '-01';
        // console.log('this.formData.month', moment().format('YYYY-MM'));
        // console.log('_______1');
        this.$nextTick(() => {
            // console.log('_____________2');
            const times1 = setInterval(() => {
                // console.log('________________3');
                this.getEchartData();
                clearInterval(times1);
            }, 1000);
            // console.log('_____________________4');
        })
        // console.log('_________________________5');
    },
    methods: {
        // 请求初始化页面数据
        getEchartData() {
            // console.log('获取当月月份数据', this.formData.month);
            let params = {
                id: this.userInfo.id,
                month: this.formData.month,
                staffName: 'hsbank'
            };
            this.$post.information.dateForm(params).then((res) => {
                // console.log('res111111__echarts数据', res);
                if (res.data.success) {
                    this.tableData = res.data.content;
                    // this.total = res.data.content.total;
                    console.log('this.formData[0].scoreNearBySix', this.tableData[0].scoreNearBySix);
                    console.log('this.formData[1].scoreNearBySix', this.tableData[1].scoreNearBySix);
                    this.initChart();
                }
            });
        },

        // 初始化echarts
        initChart() {
            console.log('this.tableData_____echarts数据', this.tableData);
            const dom = this.$refs.containerecharts;
            console.log('dom', dom);
            const myChart = echarts.init(dom);
            let app = {};
            this.option = null;
            this.option = {
                color: ['#006dfd', '#ffaf37'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#006dfd'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },

                // 006dfd    ffaf37
                legend: {
                    data: [this.tableData[0].staffName, this.tableData[1].staffName]
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '分数',
                        min: 0,
                        max: 250,
                        interval: 10,
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },

                ],
                series: [
                    {
                        name: this.tableData[0].staffName,
                        type: 'bar',
                        data: this.tableData[0].scoreNearBySix,// [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                    },
                    {
                        name: this.tableData[1].staffName,
                        type: 'bar',
                        data: this.tableData[1].scoreNearBySix,//[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                    }
                ]
            };
            if (this.option && typeof this.option === "object") {
                myChart.setOption(this.option, true);
            }
        }

    },
}
</script>
<style scoped  lang="scss">
.QualityTestingEchart {
    height: 70vh;
}
</style>